<!--用户登录  -->
<template>
    <div class="index">
        <div class="reginster">
            <div class="ureginster">
                <div class="reginstertitle">注册</div>
                <div>
                    <input type="text" placeholder="User" id="user">
                    <input type="text" placeholder="Password" id="pwd">
                    <input type="text" placeholder="Phone" id="phone">
                </div>
                <button @click="reginster">注册</button>
            </div>
            <div class="bg">
                <img src="../../assets/img/bg2.png" alt="">
                <div>
                <router-link to="/">已有账号，去登录</router-link>
            </div>
            </div>
        </div>
    </div>
    </template>
    
    <script>
    export default {
    data() {
    return {
        islogin:false,
    }
    },
    methods:{
        reginster(){
            // alert("这是注册按钮")
            let user=document.querySelector("#user").value
            let pwd=document.querySelector("#pwd").value
            let phone=document.querySelector("#phone").value
            // console.log("用户名：",user)
            // console.log("密码：",pwd)
            // console.log("手机号：",phone)
            var url=`http://localhost:3000/reginster?uname=${user}&upwd=${pwd}&phone=${phone}`
            this.axios.post(url).then(res=>{
                // console.log(res)
                if(res.data.code==200){
                    alert("注册成功，请去登录页面")
                    // 注册成功跳转到登录页面
                    this.$router.push({
                        path:"/"
                    })
                }else{
                    alert("用户名重复，换一个用户名吧")
                }
            })
        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
    .index{
        width: 100%;
      height: 100vh;
      background: url("../../assets/img/bg2.png") center center no-repeat;
      background-size: 100% 100%;
      position: fixed;
    }
    .reginster{
        /* 注册登录框 */
        text-align: center;
        /* background-color: rgb(218, 198, 198); */
        width: 600px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        flex-direction: row;
    }
    .bg{
        width: 300px;
        height: 300px;
        background-color: rgb(77, 170, 67);
    }
    .bg img{
        width: 100%;
        height: 300px;
        
    }
    .bg div{
        background-color: rgb(10, 105, 194);
        border-radius: 15px;
        width: 200px;
        padding: 5px;
        position: absolute;
        top: 135px;
        left: 350px;
        }
.bg div a{
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 10px;
}
    .ureginster{
        /* 用户注册框 */
        width: 300px;
        height: 300px;
        background-color: rgb(248, 240, 240);
    }
    .ureginster div input{
    /* 用户注册输入框 */
    width: 260px;
    height: 40px;
    border-radius: 5px;
    margin: 10px 5px;
}
.reginster button{
    /* 注册按钮 */
    width: 160px;
    height: 40px;
    border-radius: 25px;
}
    .reginstertitle{
        font-size: 22px;
        color: rgb(3, 3, 3);
        height: 30px;
        margin: 10px 0;
    }
    
    
    </style>